<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP
        CSS 属性 clip-path:circle() 用于将一个元素或图片裁剪成一个圆形

        clip-path: circle(圆半径 at 圆心坐标);

        TIP
        圆半径可以是以下四种值
        可以是长度单位 （如：10px）
        可以是百分比 （如 50%），百分比慎用，因为百比相对谁而言不确定
        可以是 closest-side 与元素中最近的边相交形成的圆
        可以是 farthest-side 与元素中最远的边相交形成的圆
        圆心坐标可以是以下三种值
        可以是一个长度单位，如 50px 可以是一个百分比（x 坐标相对宽而言 y 坐标相对高而言），如（50% 50%）
        可以是 left right 与 top bottom 和 center 三组中任意两个关键字组合或一个字，如（left center 或 right bottom）
    -->

    <style>
        .layout {
          width: 200px;
          height: 100px;
          background-color: khaki;
        }
        .circle1 {
          /* 裁剪半径为 50px的圆，圆心坐标位于元素中心 */
          clip-path: circle(50px at 50% 50%);
        }
        .circle2 {
          /* 裁剪半径为 50px的圆，圆心坐标元素最右边的中心位置  */
          clip-path: circle(50px at right center);
        }
        .circle3 {
          /* 在离元素 50px 30px 坐标处，
              裁剪一个与当前元素最近的一边相交的圆*/
          clip-path: circle(closest-side at 50px 30px);
        }
        .circle4 {
          /* 在离元素 50px 30px 坐标处，
              裁剪一个与当前元素最远的一边相交的圆*/
          clip-path: circle(farthest-side at 50px 30px);
        }
      </style>
      
      <div class="layout circle1"></div>
      <div class="layout circle2"></div>
      <div class="layout circle3"></div>
      <div class="layout circle4"></div>
</body>
</html>